<template>
  <view class="container">
    <!-- 顶部子分类tab -->
    <scroll-view class="titleBar" scroll-x="true" :scroll-into-view="intoView" :scroll-with-animation="true">
      <block v-for="(item, index) in subCategoryList" :key="index">
        <view :id="'tag' + item.categoryId" :class="'categoryItem ' + (item.categoryId == categoryId ? 'on' : '')" :data-id="item.categoryId" @tap="onSubCategoryTap">
          {{ item.categoryName }}
        </view>
      </block>
    </scroll-view>
    <!-- 商品列表 -->
    <view class="item">
      <block v-if="prodList.length">
        <block v-for="(prod, key) in prodList" :key="key">
          <view class="prod-items" :data-prodid="prod.prodId" @tap="toProdPage">
            <view class="hot-imagecont">
              <image :src="prod.pic" class="icon" />
            </view>

            <view class="hot-text">
              <view class="goodsName">{{ prod.prodName }}</view>
              <view class="describe">{{ prod.brief }}</view>
              <view class="text-info">
                <view class="price">
                  <text class="symbol">￥</text>
                  <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                  <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </block>
      <view v-else class="empty-wrap">暂无数据</view>
    </view>
  </view>
</template>

<script setup>
const wxs = number();

const parentId = ref('');
const categoryId = ref(0);
const current = ref(1);
const pages = ref(0);
const cityName = ref('深圳');
const prodList = ref([]);
const isLoaded = ref(false); // 列表是否加载完毕

onLoad((options) => {
  parentId.value = options.parentId;
  categoryId.value = options.categoryId;
  getCityStorage();
  getSubCategory();
  getProdList();
});

onReachBottom(() => {
  if (current.value < pages.value) {
    current.value = current.value + 1;
    getProdList();
  }
});

const getCityStorage = () => {
  let city = uni.getStorageSync('CityName');
  if (city) cityName.value = city;
};

const intoView = ref('');
const subCategoryList = ref([]);

//分类标签
const getSubCategory = () => {
  http
    .request({
      url: '/category/categoryInfo',
      method: 'GET',
      data: {
        parentId: parentId.value
      }
    })
    .then(({ data }) => {
      subCategoryList.value = data;
      nextTick(() => {
        intoView.value = 'tag' + categoryId.value;
      });
    });
};

//列表
const getProdList = () => {
  isLoaded.value = false;
  http
    .request({
      url: '/prod/pageProd',
      method: 'GET',
      data: {
        categoryId: categoryId.value,
        current: current.value,
        size: 10,
        sort: 0,
        isAllProdType: true,
        city: cityName.value
      }
    })
    .then(({ data }) => {
      isLoaded.value = true;
      prodList.value = data.current == 1 ? data.records : prodList.value.concat(data.records);
      current.value = data.current;
      pages.value = data.pages;
    });
};

/**
 * 切换顶部分类
 */
const onSubCategoryTap = (e) => {
  categoryId.value = e.currentTarget.dataset.id;
  current.value = 1;
  pages.value = 0;
  intoView.value = 'tag' + e.currentTarget.dataset.id;
  getProdList();
};

/**
 * 跳转商品下详情
 */
const toProdPage = (e) => {
  const productId = e.currentTarget.dataset.prodid;
  if (prodid) {
    uni.navigateTo({
      url: '/pages/index/productInfo/productInfo?productId=' + productId
    });
  }
};
</script>

<style lang="scss" scoped>
@import './categoryProduct.scss';
</style>
